<template>
    <div>
        <van-uploader v-model="fileList" :max-count="length" :before-read="beforeRead" :after-read="afterRead" />
        <van-overlay :show="show" z-index="9999">
            <van-loading class="layer" color="#ff5e10" size="80" vertical>图片上传中...</van-loading>
        </van-overlay>
    </div>
</template>

<script>
import { Uploader, Loading , Overlay, Toast} from "vant";
import axios from "axios";
export default {
    components: {
        [Uploader.name]: Uploader,
        [Loading.name]:Loading,
        [Overlay.name]:Overlay 
    },
    props: ["type","length"],
    data() {
        return {
            fileList: [],
            show:false
        };
    },
    methods: {
        beforeRead(file){
            if (file.size > 1024 * 1024 * 100) {
                Toast("请上传小于100M的图片");
                return false;
            }
            this.show = true
            return true;
        },
        afterRead(file) {
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    token: sessionStorage.getItem("token")
                }
            };
            let params = new FormData();
            params.append("type", this.type);
            params.append("file", file.file);
            axios.post("http://115.29.172.79/YXCH5/uploadPic2", params, config)
                .then(res => {
                    if(res.data.code){
                        this.show = false
                        this.$emit('setimg', res.data.results.imageUrl);
                    }else{
                        this.fileList.pop()
                        this.show = false
                        Toast("图片上传失败");
                    }
                }).catch(err=>{
                    this.fileList.pop()
                    this.show = false
                    Toast("图片上传失败");
                })
            return true;
        }
    }
};
</script>
<style scoped>
.layer{
    position:absolute;
    top: 40%;
    left: 50%;
    margin: -40px;
}
</style>
